<template>
  <div id="app">
    <!-- 顶部导航组件 -->
    <Header />
    
    <!-- 主要内容区域 -->
    <div class="main-container">
      <!-- 国内新闻区块 -->
      <NewsSection 
        :category="'国内新闻'"
        :news="domesticNews"
      />
      
      <!-- 其他新闻区块通过v-for循环生成 -->
      <NewsSection 
        v-for="newsData in allNewsData" 
        :key="newsData.category"
        :category="newsData.category"
        :news="newsData.news"
      />
    </div>
    
    <!-- 底部组件 -->
    <Footer />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Header from './components/Header.vue'
import NewsSection from './components/NewsSection.vue'
import Footer from './components/Footer.vue'

// 国内新闻数据
const domesticNews = ref([
  {
    title: "国家发布新一轮经济刺激政策",
    summary: "为促进经济复苏，国家出台了一系列扶持政策，包括减税降费、增加基础设施投资等措施..."
  },
  {
    title: "全国多地迎来强降雨天气",
    summary: "气象部门发布暴雨预警，预计未来三天南方地区将出现持续性强降雨..."
  }
])

// 其他新闻数据
const allNewsData = ref([
  {
    category: "国际新闻",
    news: [
      {
        title: "全球气候峰会达成新协议",
        summary: "各国领导人就减少碳排放达成历史性协议，承诺2030年前减排50%..."
      },
      {
        title: "国际油价持续上涨",
        summary: "受地缘政治因素影响，国际油价连续三周上涨，创下今年新高..."
      }
    ]
  },
  {
    category: "娱乐新闻",
    news: [
      {
        title: "新电影《时空之旅》票房破十亿",
        summary: "由知名导演执导的科幻大片《时空之旅》上映两周票房突破十亿..."
      },
      {
        title: "音乐节阵容公布，多位大牌歌手加盟",
        summary: "今年夏季音乐节阵容强大，包括多位流行乐坛天王天后..."
      }
    ]
  },
  {
    category: "体育新闻",
    news: [
      {
        title: "世界杯预选赛：国家队取得关键胜利",
        summary: "在昨晚进行的世界杯预选赛中，国家队以2-0战胜对手..."
      },
      {
        title: "NBA：湖人队签下全明星球员",
        summary: "湖人队官方宣布，已成功签下全明星前锋，实力大增..."
      }
    ]
  },
  {
    category: "科技新闻",
    news: [
      {
        title: "新型人工智能突破语言障碍",
        summary: "研究人员开发出能实时翻译100种语言的新AI系统..."
      },
      {
        title: "量子计算机实现重大突破",
        summary: "科学家宣布量子计算机处理特定任务速度比传统计算机快1亿倍..."
      }
    ]
  },
  {
    category: "财经新闻",
    news: [
      {
        title: "股市创年内新高",
        summary: "受利好消息刺激，主要股指全线飘红，创下年内新高..."
      },
      {
        title: "央行调整货币政策",
        summary: "央行宣布将下调存款准备金率0.5个百分点..."
      }
    ]
  }
])
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', sans-serif;
}

body {
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.6;
}

#app {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-container {
  flex: 1;
  padding: 20px;
}
</style>